import 'dart:convert';
import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screenutil.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:shop/config/config.dart';
import 'package:shop/http/HttpUtil.dart';
import 'package:shop/route/my_route.dart';

import 'GoodsListPage.dart';

class FenleiPage extends StatefulWidget {
  FenleiPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _FenleiPage createState() => _FenleiPage();
}

class _FenleiPage extends State<FenleiPage> {
  List goodsTypeList=[];    //一级类别的列表
  List goodsTypeList_2=[];  //点击的一级类别相应的二级类别列表
  int xiabiao=0;            //点击的一级类别对应的下标
  _FenleiPage(){
    _loading();
  }

  Future<void> _loading() async {
    //查询一级类别
    var x = await HttpUtil().get("/app/goodsType/getGoodsFenlei");
    if(x['count']>0){
      goodsTypeList=x['data'];
      if(goodsTypeList.length>0){
        goodsTypeList_2=goodsTypeList[0]['children'];
      }
    }else{
      Fluttertoast.showToast(
          msg: "未找到商品类别",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.BOTTOM,
          timeInSecForIosWeb: 1,
          backgroundColor: Colors.black45,
          textColor: Colors.white,
          fontSize: 16.0
      );
    }
    if(mounted){
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context , width: 464 , height: 820) ;
    return Scaffold(
      appBar: AppBar(
        title: Text("商品分类"),
      ),
      body:SingleChildScrollView(
        child: Column(
          children: [
            Container(
              // height: 600,
              color: Colors.blue,
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SingleChildScrollView(child:
                Column(
                  children: [
                    // 这里是一级分类
                    _getGoodsType1(),
                  ],
                ),),
                SingleChildScrollView(
                  child: Column(
                    // crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      _getGoodsType2(),
                    ],
                  ),
                )
              ],
            )
          ],
        ),
      )
    );
  }

  //获取一级商品类别
  Widget _getGoodsType1(){
    List<Widget> x = [];
    for(int i=0;i<goodsTypeList.length;i++){
      if(goodsTypeList[i]['children'].length>0){
        for(int j=0;j<goodsTypeList[i]['children'].length;j++){
          if(goodsTypeList[i]['children'][j]['children'].length>0){
            x.add(
              GestureDetector(
                child:Container(
                  child:Center(
                    child:Text(goodsTypeList[i]['gname'],style: TextStyle(color:i==xiabiao ? Colors.red : Colors.black,fontWeight: FontWeight.bold)),
                  ) ,width: ScreenUtil().setWidth(80),height: ScreenUtil().setHeight(40),
                ),onTap: (){
                setState(() {
                  xiabiao=i;
                  goodsTypeList_2=goodsTypeList[i]['children'];
                });
              },
              ),
            );
            break;
          }
        }
      }
    }
    return Container(
      child: Column(children: x),
    ) ;
  }

  //获取二级类别
  Widget _getGoodsType2(){
    List<Widget> x = [];
    if(goodsTypeList_2.length<=0){
      return Container(
        width: ScreenUtil().setWidth(300),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [Text("没有更多类别了!",textAlign: TextAlign.center)]),
      );
    }
    for(int i=0;i<goodsTypeList_2.length;i++){
      if(goodsTypeList_2[i]['children'].length>0){
        x.add(Container(
          decoration: BoxDecoration(color: Colors.white),
          margin: EdgeInsets.all(10),
          padding: EdgeInsets.all(10),
          width: ScreenUtil().setWidth(350),
          child: Wrap(
            // 这里是二级分类
            children: [Column(
              children: [
                Container(child:Row(children: [Text(goodsTypeList_2[i]['gname'])]) ),  // 二级分类名称
                Wrap(
                  spacing: 20,  // 水平间距
                  runSpacing: 10, // 垂直间距
                  children:
                  // 三级分类名称和图片
                  _getGoodsType3(goodsTypeList_2[i]['children']),
                ),
              ],
            )
            ],
          ),
        ),
        );
      }
    }
    // 测试用的
    // for(int i=0;i<4;i++){
    //
    //     x.add(Container(
    //       decoration: BoxDecoration(color: Colors.white),
    //       margin: EdgeInsets.all(10),
    //       padding: EdgeInsets.all(10),
    //       width: ScreenUtil().setWidth(350),
    //       child: Wrap(
    //         // 这里是二级分类
    //         children: [Column(
    //           children: [
    //             Container(child:Row(children: [Text("测试")]) ),  // 二级分类名称
    //             Wrap(
    //               spacing: 20,  // 水平间距
    //               runSpacing: 10, // 垂直间距
    //               //children:
    //               // 三级分类名称和图片
    //               //_getGoodsType3("test"),
    //             ),
    //           ],
    //         )
    //         ],
    //       ),
    //     ),
    //     );
    //
    // }
    return Container(
      child: Column(children: x),
    );
  }
  //获取三级商品类别
  List<Widget> _getGoodsType3(goodstypeList3){
    List<Widget> x = [];
    if(goodstypeList3.length<=0){
      x.add(Container(
        width: ScreenUtil().setWidth(300),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [Text("没有更多类别了!",textAlign: TextAlign.center)]),
      ));
      return x;
    }
    for(int i=0;i<goodstypeList3.length;i++){
      x.add(GestureDetector(
        child:Container(
          child:Column(
            children: [
              CachedNetworkImage(imageUrl: Config.getInstance().getHost()+goodstypeList3[i]['icon'],width: 60,height: 60,),
              Text(goodstypeList3[i]['gname'])
            ],
          ) ,
        ) ,
        onTap: (){
          MyRoute.push(GoodsListPage(gName: "",sort: 0,type: 1,typeId: goodstypeList3[i]['id']));
        },
      ),
      );
    }
    return x;
    // return Container(
    //   child: Column(children: x),
    // ) ;
  }

}